<template>
  <!-- 递归组件实现无限递归层级目录 -->
  <div :id="'bar'+lever" class="bar d-flex ai-center flex-wrap" :style="{ top: model + 'px' }">
      <template v-for="(item,i) in data" :key="'barList_'+ lever + i">
        <div class="line" @click="routeGo(item)">{{item.name}}</div>
        <bar-list
          :class="['bar d-flex ai-center w-100', 'lever']"
          v-if="item.children && item.selected"
          :lever="lever + 1"
          :data="item.children"
        ></bar-list>
      </template>
  </div>
  
</template>

<script lang="ts" setup>
interface bar{
  name? : string,
  path ?: string,
  selected ?: boolean,
  children ?: bar[]
}
import type { PropType } from "vue";
import { defineProps, ref, reactive, useContext, onMounted, } from "vue";

let props = defineProps({
  // 存放显示数据的地方
  data:{
    type: Array as PropType<bar[]>,
    default(){ return [] }
  },
  // 显示递归层级
  lever:{
    type: Number,
    default: 0,
  },
})

// 当前嵌套后的高度
let model = ref(0);

// 计算当前子类应该展示的高度(动态高度)
const computedHeight = () => {
  let finallyNode = document.getElementById('bar'+ (props.lever - 1));
  if(finallyNode){
    if(props.lever == 1){
      model.value = (finallyNode as HTMLElement).offsetHeight + (finallyNode as HTMLElement).offsetTop || 0;
    }else{
      model.value = (finallyNode as HTMLElement).offsetHeight || 0;
    }
  }else{
    model.value = 0;
  }
}

// 初始化完成后生成的防止浏览器缩放产生的问题，动态计算高度
onMounted(()=>{
  computedHeight();
  window.onresize = () => {
    computedHeight();
  }
})


// 点击展开或者点击跳转
const routeGo = (item: bar)=>{
  // 为了防止出现多个错位的情况，所以需要关闭除了当前分支下其他的分支
  props.data.forEach(( v:bar,i:number )=>{
    if(v.selected){ v.selected = false }
  })
  if(item.children){
    item.selected = !item.selected;
  }else{
    // 此处进行路由跳转
  }
}

</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.6s ease;
}


/*两个搭配使用，能够实现后续列表渐渐飘上来的效果*/
.v-move{
  transition: all 0.6s ease;
}
.v-leave-active{
  position: absolute;
}

.position{
  position: absolute;
}
.lever{
  @extend .position;
  top: 45px;
  left: 0px;
}
.Pseudo{
  @extend .position;
  content: '';
  width: 6px;
  height: 6px;
}
.bar{
  transition: ease-in-out 0.5s;
}
.line{
  position: relative;
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin: 3px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  // -webkit-animation-timing-function: ease-in-out;
  // -webkit-animation-name: breathe;
  // -webkit-animation-duration: 1500ms;
  // -webkit-animation-iteration-count: infinite;
  // -webkit-animation-direction: alternate;
  &:before{
    @extend .Pseudo;
    left: -3px;
    top: -3px;
    border-left: 3px double #2b92d4;
    border-top: 3px double #2b92d4;
  }
  &:after{
    @extend .Pseudo;
    right: -3px;
    bottom: -3px;
    border-right: 3px double #2b92d4;
    border-bottom: 3px double #2b92d4;
  }
}

@-webkit-keyframes breathe{
  0% {
    opacity: 0.7;
    box-shadow: 0 1px 2px rgba(0,147,223,0.4), 0 1px 1px rgba(0,147,223,0.1) inset;
  }

  100% {
    opacity: 1;
    border: 1px solid rgba(59,235,235,0.7);
    box-shadow: 0 1px 1px #0093df, 0 1px 1px #0093df inset;
  }
}
</style>